<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="addButton">添加元素</button>
    <div class="outer-box">
      <div class="content">
        <ul id="myList">
          <!-- 初始列表项 -->
          <li>菜单项 1</li>
          <li>菜单项 2</li>
          <li>菜单项 3</li>
          <li>菜单项 4</li>
          <li>菜单项 5</li>
        </ul>
      </div>
      <div class="inner-box-left">
        <div class="jianleft" id="jianleft">
          <img src="./left.png" alt="" />
        </div>
      </div>
      <div class="inner-box">
        <div class="jian" id="jian"><img src="./right.png" alt="" /></div>
      </div>
    </div>
  </body>
  <style>
    /* 隐藏垂直滚动条 */
    ::-webkit-scrollbar {
      display: none;
    }

    /* 或者只隐藏滚动条的轨道和滑块 */
    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: transparent;
    }
    .outer-box {
      position: relative; /* 设置为相对定位 */
      width: 50%; /* 你可以改变这个值来观察内部盒子的行为 */
      padding: 10px; /* 添加一些内边距以便观察 */
      /*  border: 1px solid #000; 添加边框以便观察 */
    }

    .inner-box {
      position: absolute; /* 设置为绝对定位 */
      right: 1px; /* 使其相对于外部盒子的最右边进行定位 */
      top: 11px; /* 你可以根据需要调整这个值 */
      width: 30px; /* 设置内部盒子的宽度 */
      padding: 6px; /* 添加一些内边距以便观察 */
      /* border: 1px solid #f00; /* 添加边框以便观察 */
      background-color: #fff;
      text-align: center;
      display: none;
      margin-right: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
    }

    .inner-box-left {
      position: absolute; /* 设置为绝对定位 */
      left: 1px; /* 使其相对于外部盒子的最右边进行定位 */
      top: 11px; /* 你可以根据需要调整这个值 */
      width: 30px; /* 设置内部盒子的宽度 */
      padding: 6px; /* 添加一些内边距以便观察 */
      /* border: 1px solid #f00; 添加边框以便观察 */
      background-color: #fff;
      text-align: center;
      display: none;
      margin-left: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
    }
    .content {
      width: 100%;
      overflow: auto;
      overflow-y: hidden;
      white-space: nowrap;
      border: 1px solid rgb(0, 255, 0);
    }
    #myList {
      display: flex;
    }

    li {
      border: 1px solid #ccc;
      margin-right: 10px;
      list-style: none;
    }
    ul {
      list-style: none;
      padding-left: 0;
      margin: 10px 0;
    }
    .jian {
      border-radius: 50%;
      width: 30px;
      height: 30px;
      line-height: 30px;
    }
    .jian img {
      width: 100%;
      height: 100%;
    }
    .jianleft {
      border-radius: 50%;
      width: 30px;
      height: 30px;
      line-height: 30px;
    }
    .jianleft img {
      width: 100%;
      height: 100%;
    }
    .jian:hover {
      background-color: #ccc;
      cursor: pointer;
    }
    .jianleft:hover {
      background-color: #ccc;
      cursor: pointer;
    }
  </style>
  <script>
    const customScrollPane = document.querySelector(".content");
    const addButton = document.getElementById("addButton");
    const myList = document.getElementById("myList");

    addButton.addEventListener("click", () => {
      // 创建一个新的列表项元素
      const newLi = document.createElement("li");
      // 为新的列表项设置文本内容
      // 这里可以是固定的文本，也可以是动态生成的文本
      const textNode = document.createTextNode(
        `菜单项 ${myList.children.length + 1}`
      );
      // 将文本节点添加到新的列表项中
      newLi.appendChild(textNode);
      // 将新的列表项添加到ul元素中
      myList.appendChild(newLi);
      // 如果ul元素至少有一个子元素，则插入到倒数第二个位置
      //   if (myList.children.length > 1) {
      //     // 获取倒数第二个元素的索引
      //     const lastButOneIndex = myList.children.length - 1;
      //     // 将新的列表项插入到倒数第二个元素之前
      //     myList.insertBefore(newLi, myList.children[lastButOneIndex]);
      //   } else {
      //     // 如果ul元素没有子元素或只有一个子元素，则直接添加到末尾
      //     myList.appendChild(newLi);
      //   }
      if (customScrollPane.scrollWidth - customScrollPane.clientWidth > 0) {
        scrollLeftosition(
          customScrollPane.scrollWidth - customScrollPane.clientWidth
        );
      }
    });
    // 假设你想自动滚动到某个位置（可选）
    function scrollLeftosition(position) {
      //   customScrollPane.scrollLeft = position;
      smoothScrollTo(customScrollPane, position, 600); // 在1秒内平滑滚动到scrollLeft为500的位置
    }
    const jianButton = document.querySelector(".jian");
    jianButton.addEventListener(
      "click",
      () => {
        scrollLeftosition(customScrollPane.scrollLeft + 150);
      },
      { once: false }
    );
    const jianButtonLeft = document.querySelector(".jianleft");
    jianButtonLeft.addEventListener(
      "click",
      () => {
        scrollLeftosition(customScrollPane.scrollLeft - 150);
      },
      { once: false }
    );
    // 监听滚动事件
    customScrollPane.addEventListener("scroll", function (event) {
      setTimeout(() => {
        const scrollLeft = this.scrollLeft; // 当前滚动的距离（顶部）
        const scrollBottom = this.scrollWidth - this.clientWidth - scrollLeft; // 滚动到底部的距离

        console.log("Scrolled to:", scrollLeft);

        // 示例：当滚动到底部时加载更多内容
        if (scrollBottom <= 0) {
          // 假设 loadMoreContent 是一个函数，用于从服务器加载更多内容
          // loadMoreContent();
          console.log("Loading more content...,还没滚动到底");
          document.querySelector(".inner-box").style.display = "none";
        } else {
          document.querySelector(".inner-box").style.display = "block";
        }
        if (scrollLeft > 0) {
          document.querySelector(".inner-box-left").style.display = "block";
        } else {
          document.querySelector(".inner-box-left").style.display = "none";
        }
      }, 605);
      // 滚动时执行的逻辑
    });
    function smoothScrollTo(element, targetScrollLeft, duration) {
      var start = null;
      var currentTime = null;
      var previousTime = null;
      var elapsedTime = 0;
      var fromScrollLeft = element.scrollLeft;

      function animate(timestamp) {
        if (start === null) start = timestamp;
        currentTime = timestamp;
        elapsedTime = currentTime - start;

        var progress = Math.min(elapsedTime / duration, 1);
        var scrollLeft =
          fromScrollLeft + (targetScrollLeft - fromScrollLeft) * progress;

        element.scrollLeft = scrollLeft;

        if (elapsedTime < duration) {
          window.requestAnimationFrame(animate);
        }
      }

      window.requestAnimationFrame(animate);
    }
  </script>
</html>
